<template>
  <div>
    <Row>
      <i-col span="24" class="operation_item y_query_right" style="">
        <Select placeholder="排序方式" v-model="sort" class="y_condition" clearable style="text-align: left;width: 120px;">
          <Option value="create_time desc">时间降序</Option>
          <Option value="create_time asc">时间升序</Option>
        </Select>
        <Input v-model.trim="tParam.subject" placeholder="标题关键词" clearable class="y_condition"></Input>
        <Input v-model.trim="tParam.userNo" placeholder="用户编号或发件人邮箱" style="min-width: 170px;" clearable class="y_condition"></Input>
        <Select placeholder="标签" v-model="tParam.tags" class="y_condition" style="text-align: left;"
                clearable filterable allow-create @on-clear="tParam.tag=null" @on-create="createSearchTag">
          <Option v-for="tag in tagList" :value="tag">{{ tag }}</Option>
        </Select>

        <DatePicker placeholder="开始时间" type="datetime" v-model="tParam.startTime" format="yyyy-MM-dd HH:mm"
                    style="min-width: 150px" class="y_condition"></DatePicker>
        -
        <DatePicker placeholder="截止时间" type="datetime" v-model="tParam.endTime" format="yyyy-MM-dd HH:mm"
                    class="y_condition"></DatePicker>
        <Button type="primary" icon="md-search" @click="search()" class="y_condition">查询</Button>

      </i-col>
    </Row>


    <Row justify="end" >
      <i-col style="margin-bottom: -0.1rem;">
        <Button type="error" icon="ios-trash-outline" class="y_condition" @click="deleteAction()"
                :disabled="messageSelected.length==0">删除</Button>
      </i-col>
    </Row>
    <List>
      <ListItem style="display: flex;flex-direction: column;align-items: flex-start;margin-left: 1rem;">
        <Checkbox v-model="isCheckedAllMessage" @on-change="handleCheckAll">全选</Checkbox>
      </ListItem>
      <CheckboxGroup v-model="messageSelected" @on-change="checkChange">
        <list-item class="list_item" v-for="(item,index) in emailData">
          <div style="width:100%;padding: 0 0.5rem;"  >
            <Row style="cursor: pointer">
              <i-col span="1">
                <Checkbox :label="item.id" :value="index">{{ check }}</Checkbox>
              </i-col>
              <i-col span="23" style="text-align: left;" @click.native="showEmail(index)">
                <p style="font-weight: 500;font-size: 0.8rem">{{ item.subject }}</p>
                <p  v-if="item.text!=null" class="base_key" style="margin-top: 0.3rem">{{ item.text.substring(0, 80) }}</p>
              </i-col>
            </Row>
            <Row justify="end"  style="margin-top: 0.5rem">
              <i-col>
                <Tag @click.stop color="red" v-if="item.tags!=null && item.tags.length>0">
                  {{parseTags(item.tags).join(",")}}
                </Tag>
                <KeyValueView title="收件邮箱">{{item.emailTo}}</KeyValueView>

                <span @click.stop class="minWidth">
                <Icon type="ios-alert" class="list_key"  />状态：
                <span class="list_value" style="font-weight: bold;padding-right: 0.2rem" v-text="emailStatusLabel(item.emailStatus)"></span>
                <span style="color:#2D8cF0;font-size: 13px;cursor: pointer"
                      @click="showStateModal(item.id, item.emailStatus)">
                  <span>更改</span>
                </span>
              </span>
                <!--              <Tag @click.stop type="border" color="purple" style="margin-right: 1rem;">发件人：{{ item.virtualName }}</Tag>-->
                <KeyValueView title="时间">{{ $tiyBJTime(new Date(item.createTime).getTime()) }}</KeyValueView>
              </i-col>

            </Row>



            </Row>
          </div>
        </list-item>
      </CheckboxGroup>
    </List>

    <div style="float: right;margin-top: 1rem">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[20,40,60,100]"
            show-sizer show-elevator/>
    </div>

    <!--删除确认弹出框-->
    <Modal
      v-model="status.modalDelete.isShow"
      title="确认删除"
      :loading="status.modalDelete.isLoading"
      @on-ok="deleteAll">
      <p>确认删除邮件?</p>
    </Modal>

    <!-- 邮件详情 -->
    <Modal
      v-model="status.showEmail.isShowing"
      title="邮件详情"
      :mask-closable="false"
      :styles="{top: '20px',bottom:'20px',width:'65%'}">
      <AEmailDetail :sys-email="1" :email-to="tParam.email.emailTo" :virtual-name="tParam.email.virtualName"
                    :create-time="tParam.email.createTime" :encode-name="tParam.email.encodeName"
                    :subject="tParam.email.subject" :content="tParam.email.content" :type="2" :email-address-id="tParam.email.emailAddressId"
                    :attachment="tParam.email.attachment" :id="tParam.email.id" :selected-tags="tParam.email.tags"
                    :attachment-count="tParam.email.attachmentCount" :attachment-show="tParam.email.attachmentShow"
                    @reply="reply" @spam="spam" @addBlacklist="addBlacklist" ref="AEmailDetail"></AEmailDetail>
      <div slot="footer"></div>
    </Modal>

    <!-- 回复邮件 -->
    <Modal
      v-model="status.replayEmail.isShowing"
      title=""
      :mask-closable="false"
      :styles="{top: '20px',bottom:'20px',width:'80%'}">
      <send-email v-bind:receiveUser="tParam.email.selectedUsers" v-bind:isRefresh="false"
                       v-on:listenSendEmailEvent="sendSuccess" :is-send="false" ref="SendEmail"></send-email>
      <div slot="footer"></div>
    </Modal>

    <!-- 邮件状态 -->
    <Modal v-model="status.modalStatusChange.isShow" draggable title="邮件状态"
           @on-ok="complete"  :width="this.$yMobile()?'80%':'500'">
      <Select v-model="tParam.emailStatus"  >
        <Option v-for="item in emailStatusDict" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </Modal>

  </div>
</template>

<script>
    import tiyData from "./js/parseSysEmail/parse_data";
    import AEmailDetail from "../email/EmailDetail.vue"
    import SendEmail from "../email/SendEmailTemplate.vue"
    import TrashEmail from "./TrashEmail";
    import KeyValueView from "../widgets/KeyValueView";

    import {
        init,
        emailList,
        deleted,
        webDelete,
        showEmail,
        replyEmail,
        spam,
        addBlacklist,
        webDeleteAll,
    } from "./js/parseSysEmail/parse_fun";

export default {
  data(){
    return {
      page: tiyData.tPage,
      tParam: tiyData.tParam,
      emailData: tiyData.tData.emailList,
      status: tiyData.tStatus,
      tagList: tiyData.tData.tagList,
      index2: 0,
      check: '',
      isCheckedAllMessage: false,
      messageSelected: [],
      sort:'create_time desc',
      emailStatusDict:[
          {  value: 100,label: '待分配'},
          {  value: 200,label: '待处理'},
          {  value: 300,label: '已回复'},
      ],
      historyCount:0,
    }
  },
  components:{AEmailDetail, SendEmail,TrashEmail,KeyValueView},
    props:{
        sysEmail:Number,
    },
    created(){
        init(this,tiyData);
    },
    methods: {
        init(){
            init(this,tiyData);
        },
        search() {
            emailList(this, tiyData);
        },
        changePage(page) {
            tiyData.tPage.currentPage = page;
            emailList(this, tiyData);
        },
        sizeChange(page) {
            tiyData.tPage.stepNumber = page;
            emailList(this, tiyData);
        },
        showEmail(index) {
            this.index2 = index;
            showEmail(this, tiyData, index)
        },
        reply() {
            replyEmail(this, tiyData, this.index2);
        },
        spam(){
            spam(this, tiyData, this.index2);
        },
        addBlacklist(){
            addBlacklist(this, tiyData, this.index2);
        },
        sendSuccess(isSuccess) {
            if (isSuccess) {
                tiyData.tStatus.replayEmail.isShowing = false;
                //修改邮件状态为已回复
                let emailInfo=tiyData.tData.emailList[this.index2];
                tiyData.tParam.id=emailInfo.id;
                tiyData.tParam.emailStatus=300;
                this.complete();
            }
        },
        deleteAction() {
            deleted(this, tiyData);
        },
        deleteItem(index) {
            webDelete(this, tiyData);
        },
        deleteAll() {
            webDeleteAll(this, tiyData);
        },
        createSearchTag(query) {
            if (this.tagList.find(function (tag) {
                return query == tag;
            }) == null) {
                this.tagList.push(query);
            }
        },
        parseTags(tags) {
            return this.$toJson(tags);
        },
        checkChange(val) {
            if (this.messageSelected.length == this.emailData.length) {
                this.isCheckedAllMessage = true;
            } else {
                this.isCheckedAllMessage = false;
            }
        },
        handleCheckAll() {
            let self = this;
            if (this.isCheckedAllMessage) {
                this.messageSelected.splice(0, this.messageSelected.length);
                for(let i=0;i<this.emailData.length;i++){
                    self.messageSelected.push(this.emailData[i].id);
                }
            } else {
                this.messageSelected.splice(0, this.messageSelected.length);
            }
        },
        complete(){
            let self = this;
            self.$Spin.show();
            self.$apiEmail.updateEmailProcess({
                "id": tiyData.tParam.id,
                "emailStatus":tiyData.tParam.emailStatus,
            }).then(function (response) {
                self.$Spin.hide();
                if (response.success) {
                    self.search();
                } else {
                    self.$Message.error(response.errorMessage);
                }
            });
        },
        emailStatusLabel(type){
            if(type==null){
                return '';
            }
            for(let i=0;i<this.emailStatusDict.length;i++){
                if(type==this.emailStatusDict[i].value){
                    return this.emailStatusDict[i].label;
                }
            }
            // return type;
        },
        showStateModal(id, emailStatus){ //修改状态窗口
            tiyData.tParam.id = id;
            tiyData.tParam.emailStatus = emailStatus;
            tiyData.tStatus.modalStatusChange.isShow = true;
        },
    }
}
</script>

<style lang="less" scoped>
  @import  (once,optional)  "../css/base";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .operation_item {
    text-align: left;
    margin-right: 20px;
  }

  .list_value {
    font-size: 13px;
    color: @tiyTextDescColor;
    padding-right: 1rem;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }

  .list_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .list_item:hover {
    background: @tiySectionColor;
  }

  .list_key{
    font-size: 15px;
    color: @tiyTextLightColor;
    padding: 0rem 0.3rem;
  }

  .list_value{
    font-size: 13px;
    color: @tiyTextDescColor;
    padding-right: 1rem;
    word-wrap:break-word;
    word-break:break-all;
    overflow: hidden;
  }

  .minWidth{
    min-width: 5rem;
    margin-right: 1rem;
  }
</style>
